<template>
  <div>
    <div class="wave el-icon-arrow-up" @click="prev"></div>
    <el-avatar :size="size"></el-avatar>
    <span class="triangle"></span>
    <div class="brief">
      整个夏天，想和你环游世界
      <div class="contact">
        <span class="iconfont icon-qq" @click="handleCopyLink('qq')"></span>
        <span
          class="iconfont icon-weixin"
          @click="handleCopyLink('weixin')"
        ></span>
        <span class="iconfont icon-github" @click="handleSkip('github')"></span>
        <span class="iconfont icon-gitee" @click="handleSkip('gitee')"></span>
      </div>
    </div>
    <div class="wave el-icon-arrow-down" @click="next"></div>
  </div>
</template>

<script>
export default {
  name: "MyMainProfile",
  props: ["pagePrev", "pageNext"],
  data() {
    return {
      size: 150,
      qq: "1369727090",
      wechat: "zw1225qq",
      github: "https://github.com/Captain-zhangw",
      gitee: "https://gitee.com/captainzw",
      notificationOffset: 60,
    };
  },
  methods: {
    prev() {
      this.pagePrev();
    },
    next() {
      this.pageNext();
    },
    handleCopyLink(contactType) {
      let link = "";
      if (contactType === "qq") {
        link = this.qq;
      } else if (contactType === "weixin") {
        link = this.wechat;
      }
      this.$copyText(link).then(
        () => {
          console.log("success");
          this.$notify({
            title: "成功",
            message: "已复制到剪贴板",
            type: "success",
            offset: this.notificationOffset,
          });
        },
        (e) => {
          console.log("error:" + e);
          this.$notify({
            title: "错误",
            message: "复制到剪贴板时发生错误，请重试",
            type: "error",
            offset: this.notificationOffset,
          });
        }
      );
    },
    handleSkip(skipType) {
      this.$confirm("即将跳转到" + skipType + "的主页，是否继续", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      }).then(() => {
        if (skipType === "github") {
          window.open(this.github, "_blank");
        } else if (skipType === "gitee") {
          window.open(this.gitee, "_blank");
        }
      });
    },
  },
};
</script >

<style lang="less" scoped>
.el-avatar {
  position: absolute;
  top: 31vh;
  left: calc(~"50vw - 75px");
  background-image: url("../assets/profile.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.triangle {
  width: 0;
  height: 0;
  border-bottom: 15px solid rgba(0, 0, 0, 0.7);
  border-left: 15px solid transparent;
  border-top: 15px solid transparent;
  border-right: 15px solid transparent;
  position: absolute;
  left: calc(~"50vw - 13px");
  top: calc(~"30vh + 170px");
}
.brief {
  position: absolute;
  height: 100px;
  line-height: 50px;
  width: 33vw;
  left: 34vw;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  box-shadow: 0px 0px 10px 10px rgba(255, 255, 255, 0.3);
  color: white;
  font-weight: 700;
  font-size: 18px;
  top: calc(~"30vh + 200px");
}
.wave {
  position: absolute;
  width: 100vw;
  left: 0;
  background-color: rgba(255, 255, 255, 0.05);
  color: rgba(0, 0, 0, 0.3);
  font-size: 22px;
  line-height: 3vh;
  height: 3vh;
  z-index: 1;
  &:nth-of-type(1) {
    top: 60px;
  }
  &:last-of-type {
    bottom: 0;
  }
  &:hover {
    background-color: rgba(255, 255, 255, 0.25);
    cursor: pointer;
  }
}
.contact {
  display: flex;
  justify-content: space-around;
  width: 50%;
  margin-left: 25%;
  .iconfont {
    font-size: 22px;
    cursor: pointer;
  }
  .icon-qq {
    color: #4cafe9;
  }
  .icon-weixin {
    color: #00c800;
  }
  .icon-github {
    color: #3e75c3;
  }
  .icon-gitee {
    color: #c71d23;
  }
}
</style>